const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//作用是将css样式从html中抽离出来
let path = require('path')
module.exports = {
    mode: 'development',
    entry: [
        "react-hot-loader/patch",
        './src/index.js'
    ],
    // devServer: {
    //     port: 8080
    // },
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, 'dist')
    },
    resolve: {
        extensions: [
          '.js',
          '.jsx',
          '.css',
          '.scss',
          '.ts',
          '.json'
        ],
        alias: {
            'react-dom': '@hot-loader/react-dom'
          }
    },
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                use: [{
                    loader:'babel-loader',options:{
                        // 将一些es6的语法转成es5了
                        presets:["@babel/preset-env","@babel/preset-react"] ,//配置一些预设
                        plugins:[//配合一些插件
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                }],
                include:path.join(__dirname,"src"),
                exclude:/node_modules/
            },
            {
                // 需要下载style-loader 和css-loader包
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader,"css-loader"]
            },
            {
                // 需要下载style-loader,sass-loader, 和css-loader包
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader,"css-loader","sass-loader"]
            },
            {
                // 需要下载file-loader包 -D
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader,"css-loader","sass-loader"]
            }
        ]
    },
    plugins: [
        // 简化了html文件的创建，使用loadsh模板提供HTML模板
        // 生成一个html模板
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,//双引号
                collapseWhitespace: true,//去除空格
            }
        }),
        new MiniCssExtractPlugin(),
        new CopyPlugin({
            patterns:[
                {
                    from: path.resolve(__dirname, './static'), //定义要拷贝的源目录，必填项
                }
            ]
            // 
            // to: path.resolve(__dirname,"./dist"), //定义要拷贝到的目标目录，非必填，不填写则拷贝到打包的output输出地址中
        })
    ]
}